<template>
	<view class="page">
		<u-navbar :is-back="true" :custom-back="goBack" title="虚拟码管理" back-text="">
		</u-navbar>
		<view class="contentTop">
			<view class="title" style="border-top: none;">
				<text style="color: #999;">虚拟码管理</text>
				<view class="">
					<image src="../../../style/image/vortualCode/compile.png" mode="" style="width: 12px;height: 12px;margin-right: 5px;"></image>
					<text @click="editVirtual" style="color: #999;">编辑</text>
					<image src="../../../style/image/vortualCode/code.png" mode="" style="width: 12px;height: 12px; margin-left: 2rem;margin-right:5px;"></image>
					<text @click="seeVirtual" style="color: #999;">查看</text>
				</view>
			</view>
			<view class="content">
				<view class="">
					<text style="color: #999;">虚拟码：</text>
					<text>{{virtualData.sn}}</text>
				</view>
				<view class="">
					<text style="color: #999;">网点名称：</text>
					<text>{{virtualData.storeName}}</text>
				</view>
				<view class="">
					<text style="color: #999;">所属商家：</text>
					<text>{{virtualData.agentInfo ? virtualData.agentInfo.name : '' }}</text>
				</view>
				<view class="">
					<text style="color: #999;">分润方式：</text>
					<text>{{getPriceType(virtualData.brokerageType)}}</text>
				</view>
				<view class="">
					<text style="color: #999;">计费信息：</text>
					<text style="margin-right:0.5rem;">
						<text>{{virtualData.price}}</text>元/半小时
					</text>
					<text>
						<text>{{virtualData.dayMax}}</text>元/天
					</text>
				</view>
				<view class="">
					<text style="color: #999;">所在位置：</text>
					<text>{{virtualData.storeAddress}}</text>
				</view>
				<view class="">
					<text style="color: #999;">添加时间：</text>
					<text style="margin-right:0.5rem;">{{getDate(virtualData.createTime)}}</text>
				</view>
			</view>
		</view>
		<view class="contentBottom" v-for="(item, index) in virtualEquipList" :key="index">
			<view class="title" style="margin-bottom:1px">
				<view class="">
					<text style="color: #02AF74;">在线</text>
					<text style="margin-left: 10px;">底座SN</text>
				</view>
			</view>
			<view class="content SN">
				<view class="">
					<text style="color: #999;">设备型号：</text>
					<text>{{item.sn}}</text>
				</view>
				<view class="">
					<text style="color: #999;">宝设备量：</text>
					<text>{{item.powerBankCount}}个</text>
				</view>
				<view class="">
					<text style="color: #999;">位置：</text>
					<text>
						<text>{{item.locationLine}}</text>行/
						<text>{{item.locationColumn}}</text>列
					</text>
				</view>
				<u-icon @click="resetBtn(item)" name="custom-icon-shanchu" color="#999" label="重置" label-pos="bottom" size="20px" label-size="1px"></u-icon>
			</view>
		</view>
		<uni-load-more  @clickLoadMore="clickLoadMore"  :content-text="contentText" :status="status" ></uni-load-more>
		<view class="button">
			<u-button @click="addEquipment" type="success" style="border-radius: 0;">添加设备</u-button>
		</view>
	</view>
</template>

<script lang="js">
	import uniLoadMore from '../../loadMore/uni-load-more.vue';
	import {
		deviceVirtualDetail,
		virtualDeviceList
	} from "../../../utils/uniApi";
	import {
		createQrCode,
		virtualTerminalRelieve
	} from "../../../utils/uniApi";
	export default {
		components:{
			 'uniLoadMore':uniLoadMore
		},
		data() {
			return {
				show: false,
				QRCode: '', //二维码
				virtualDic: {}, //虚拟码列表传参数item
				virtualData: {}, //虚拟码详情数据
				virtualEquipDic: {}, //虚拟码设备基础信息
				virtualEquipList: [], //虚拟码设备list
				
				pageN: 1, //分页的页数
				status: 'more',
				contentText: {
					contentdown: '下拉或点击查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				continueTypes: true,
			}
		},
		onHide() {
			uni.hideLoading();
		},
		onLoad(options) {
			
			if (options.virtual) {
				this.virtualDic = JSON.parse(options.virtual)
				uni.setStorage({
					key: "virtualDetail",
					data: this.virtualDic,
					success: function() {},
				});
			} else {
				this.virtualDic = uni.getStorageSync("virtualDetail");
			}
		},
		onShow() {
			
			this.deviceVirtualDetail()
			this.virtualDeviceList(this.pageN)
		},
		methods: {
			//下拉刷新
			onPullDownRefresh() {
				setTimeout(function() {
					uni.redirectTo({
						url: "../../../pages/item/virtualCode/management",
					});
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//上拉加载更多
			onReachBottom() {
				if (!this.continueTypes) {
					return
				}
				this.pageN = this.pageN + 1;
				this.virtualDeviceList(this.pageN)
			},
			clickLoadMore() {
				this.onReachBottom()
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//接口查询虚拟码详情
			deviceVirtualDetail() {
				uni.showLoading({
					title: '加载中'
				});
				let params = {

				}
				deviceVirtualDetail(params, this.virtualDic.sn).then((res) => {
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						this.virtualData = res.data.result
					} else {
						uni.showToast({
							title: "请求失败",
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			//接口查询虚拟码  设备信息
			virtualDeviceList(page) {
				uni.showLoading({
					title: '加载中'
				});
				let params = {
					page: page,
					size: '10',
					virtualSn: this.virtualDic.sn,
					status: '', //设备状态，不传默认全部，ONLINE -> 在线； OFFLINE -> 离线
				}
				virtualDeviceList(params, this.virtualDic.sn).then((res) => {
					console.log('输出设备列表：' + JSON.stringify(res.data))
					uni.hideLoading();
					if (res.data.statusCode == 200) {
						this.virtualEquipDic = res.data.result
						if (res.data.result.pages > res.data.result.current) {
							this.status = "more";
							this.continueTypes = true;
						} else {
							this.status = "noMore";
							this.continueTypes = false;
						}
						if (this.virtualEquipList.length > 0 && page == 1) {
							this.virtualEquipList = [];
						}
						this.virtualEquipList = this.virtualEquipList.concat(res.data.result.records)
					} else {
						uni.showToast({
							title: "请求失败",
							icon: "none",
							duration: 2000,
						});
					}
				})
			},
			//分润方式转换
			getPriceType(type) {
				if (type == 'NORMAL') {
					return '标准分润'
				} else if (type == 'DAYPARTING') {
					return '分段分润'
				} else if (type == 'INCREMENTAL') {
					return '递增计费'
				}
			},
			//拼接时间规则
			getDate(time) {
				var t = new Date(time)
				var ti = t.getFullYear() + '-' + (t.getMonth() + 1) + '-' + t.getDay() + ' ' + t.getHours() + ':' + t.getMinutes() +
					':' + t.getSeconds()
				return ti
			},
			//添加设备按钮
			addEquipment() {
				uni.navigateTo({
					url: "./addEquipments?store=" + encodeURIComponent(JSON.stringify(this.virtualData)),
				});
			},
			//编辑 按钮
			editVirtual() {
				var dic = {
					virtual: this.virtualData,
					isEdit: true
				}
				uni.navigateTo({
					url: "./compile?virtual=" + encodeURIComponent(JSON.stringify(dic))
				});
			},
			//查看 按钮   二维码
			seeVirtual() {
				uni.navigateTo({
					url: './qrcode?url='+this.QRCode
				})
				// this.show = true;
				if (this.QRCode == '') {
					uni.showLoading({
						title: '加载中'
					});
					let params = {}
					createQrCode(params, this.virtualDic.sn).then((res) => {
						console.log('+++++++生成二维码', JSON.stringify(res))
						uni.hideLoading();
						if (res.statusCode == 200) {
		
							this.QRCode = res.data.result
							this.gotoQR(this.QRCode)
							// console.log(this.Qrcode,'+++qqqrrrr' )
						} else {
							uni.showToast({
								title: "请求失败",
								icon: "none",
								duration: 2000,
							});
						}
					})
				} else {
					this.gotoQR(this.QRCode)
				}
			},
			//进入二维码页面
			gotoQR(value) {
				console.log('进入二维码页面')
			},
			//重置
			resetBtn(item) {
				let params = {
					sn: this.virtualDic.sn, //设备id
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				};
				virtualTerminalRelieve(params).then((res) => {
					// console.log('+++++++++++++++++确认解除设备' + JSON.stringify(res.data) )
					if (res.data.code == 200) {
						uni.showToast({
							title: '重置成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '重置失败，请稍后再试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F3F5F7;
		height: 100%;
		line-height: 1.8rem;
	}

	.title {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		border-top: 1px solid #f6f6f6;
		border-bottom: 1px solid #f6f6f6;
	}

	.content {
		background-color: #fff;
		border-bottom: 3px solid #f6f6f6;
		padding: 10px;
	}

	.SN {
		position: relative;

		.u-icon {
			position: absolute;
			right: 20px;
			top: 2rem;
		}
	}

	.button {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
